<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>上下文关键字-隐式调用</title>
		<style>
			/* 初始化页面 */
			h1,body,head{
				margin: 0;
				padding: 0;
			}
			/* 设置标题属性 */
			h1{
				color: #21AAB5;
				font-family: "宋体";
				text-align: center;
			}
			/* 设置文本域属性 */
			#inputText{
				/* 先设置为块级元素 */
				display: block;
				
				height: 150px;
				width: 80%;
				margin: 10px auto;
				background-color: #EFE7D2;
				/* 文字为白色 */
			}
			/* 设置按钮域属性 */
			#btn{
				display: block;
				height: 50px;
				width: 250px;
				position: relative;
				left: 150px;
				border-radius: 7px;
				border-color: #79F5FF;
				background-color: #79F5FF;
			}
			/* 设置处理后的结果域 */
			#result{
				width: 80%;
				margin: 10px auto;
				background-color: #EFE7D2;
			}
		</style>
	</head>
	<body>
		<!-- 标题 -->
		<h1>上下文关键字</h1>
		
		<!-- 文本域 -->
		<!-- 1.输入撒数 -->
		<textarea id = "inputText" placeholder="请输入文本(注意:必须为英文哦!!!)"></textarea>
		
		<!-- 按钮 -->
		<button id = "btn">处理文本</button>
		
		<!-- 处理的结果 -->
		<div id="result"></div>
		<script>
			//2.对按钮添加事件
			
			//2.1获取按钮对象
			let btn = document.getElementById("btn")
			//2.2对按钮绑定事件
			btn.onclick = function(){
				//2.3处理文本
				//2.3.1获取文本内容对象
				let textarea = document.getElementById("inputText")
				//2.3.2获取对象中的内容（所有与内容以字符串形式存在有换行处用\n表示）
				let textValue = textarea.value
				//2.3.3去除内容的前后空格之后判断内容是否为空
				if(textValue.trim() === ""){
					alert("请输入内容！！！")
					retrun//如果内容为空，那么你就不要向后执行了，直接结束函数
				}
				
				//3.循环移动
				//3.1首先我会用一个字符串数组来接收以\n切割的字符串返回的字符串数组
				let temp = textValue.split("\n");
				//3.2然后我将temp中的非空格行给存在initStr数组中
				let initStr = []
				for(let i = 0;i < temp.length;i++){
					if(temp[i].trim() !== ""){
						//如果去掉首尾空格不为空，那么添加到initStr集合
						initStr.push(temp[i])
					}
				}
				// console.log(initStr)//测试一下有没有问题
				//3.3开始循环移动
				//3.3.1定义moveStr存放循环移动后的文本
				let moveStr = []
				for(let i = 0;i < initStr.length;i++){
					//使用临时变量存放一行
					let line = initStr[i];
					//使用临时变量将这个字符串以空格切割
					let arrStr = line.split(" ")
					//对切割后的数组进行循环移动
					for (let i = 0; i < arrStr.length; i++) {
						//使用临时数组存放每一行移动的数据
						let tempArr = []
						for (let j = i; j < arrStr.length; j++) {
							tempArr.push(arrStr[j])
						}
						for (let j = 0; j < i; j++) {
							tempArr.push(arrStr[j])
						}
						//将这个一次数组个元素以空格隔开转为字符串并存于moveStr数组
						moveStr.push(tempArr.join(" "))
					}
				}
				// 没问题console.log(moveStr)//测试一下有没有问题
				//4.排序
				moveStr.sort()
				console.log(moveStr)//测试一下有没有问题
				for (var i = 0; i < moveStr.length; i++) {
					console.log(moveStr[i])
				}
				//5.输出
				/**
				 * 思想：将moveStr数组中的所有元素转换成一个字符串各个元素之间以<br>分开
				 * 并且我将内容输出到id=result的div当中
				 * 现在我div中内容为空 innerHtml = ""
				 * 只需将我div中的innerHTML值给赋值上就行了
				 */
				//5.1首先获取id=result的div对象
				let div = document.getElementById("result")
				//5.2对div对象中的innerHTML赋值
				/**
				 * moveStr.join("<br>")代表将moveStr数组中的元素连在一起转为字符串，每一个元素之间用换行隔开
				 * 注意不要写成moveStr.join("\n")在 HTML 中，普通的换行符 \n 会被当作空格处理，而不是实际的换行。
				 */
				div.innerHTML = moveStr.join("<br>")
			}
		</script>
	</body>
</html>
